@charset "UTF-8";
$global-font: "Roboto",Helvetica Neue,Helvetica,Arial,sans-serif;
$font-roboto-bold: "Roboto-Bold";
$font-roboto-regular: "Roboto-Regular";
$font-roboto-italic: "Roboto-LightItalic";
$global-mobile-font-size: 12px;
$global-font-size: 14px;
$global-color: #040506;
$global-color-link: #040506;
$global-color-hover: #23527c;
$global-bg: #fff;
@mixin transition($property: all, $duration: 0s, $function: ease-in-out){
  -webkit-transition: #{$property}  #{$duration}  #{$function};
  -moz-transition: #{$property}  #{$duration}  #{$function};
  -ms-transition: #{$property}  #{$duration}  #{$function};
  -o-transition: #{$property}  #{$duration}  #{$function};
  transition: #{$property}  #{$duration}  #{$function};
}
strong,b{
  font-weight: bold;
}
html{
  height: 100%;
}
body {
  height: 100%;
  font-size: $global-font-size;
  font-family: $global-font;
  color: $global-color;
  text-align:center;
  background: $global-bg;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}
article,aside,details,figcaption,figure,
footer,header,menu,nav,section {
  display:block;
}
ul {
  list-style:none;
}

blockquote {
  margin: 14px 0;
  padding: 10px 15px;
  //font-style: italic;
  quotes: "\201C""\201D""\2018""\2019";
  background: #fff;
}
blockquote:before,blockquote:after {
  //color: #999;
  //font-size: 4em;
  //line-height: 0.1em;
  //margin-right: 0.25em;
  //vertical-align: -0.4em;
}
blockquote:before {
  //content: open-quote;
}
blockquote:after {
  //content: close-quote;
}
blockquote p {
  display: inline;
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration:none;
  outline: none;
  @include transition(color,0.2s,ease);
  color: $global-color-link;
}
a:hover{
  color: $global-color-hover;
}
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select {
  vertical-align:middle;
  font-family: $global-font;
  font-size: 100%;
}
input,textarea,select{
  border: none;
  outline: none;
}
img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
%clear-both{
  clear: both;
}
%clear-left{
  clear: left;
}
%clear-right{
  clear: right;
}
%over-hidden{
  overflow: hidden;
}
%pseudo-reset{
  display: block;
  content: "";
}
%pseudo-before{
  @extend %pseudo-reset;
}
%pseudo-after{
  @extend %pseudo-reset;
  @extend %clear-both;
}
%display-none{
  display: none;
}
%display-block{
  display: block;
}
%box-sizing-border{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
%box-sizing-content{
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
@mixin animation-name($keyframe){
  -webkit-animation-name: #{$keyframe};
  -moz-animation-name: #{$keyframe};
  -o-animation-name: #{$keyframe};
  animation-name: #{$keyframe};
}
@mixin animation-delay($delay:0.3s){
  -webkit-animation-delay: #{$delay};
  animation-delay: #{$delay};
}
@mixin animation($animation,$time: 1s){
  -webkit-animation: #{$animation};
  -moz-animation: #{$animation};
  -o-animation: #{$animation};
  animation-name: #{$animation};
  -moz-animation-duration: #{$time};
  -o-animation-duration: #{$time};
  -webkit-animation-duration: #{$time};
  animation-duration: #{$time};
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@mixin box-resize($type:both){
  resize: #{$type};
  overflow: auto;
}
@mixin border-radius($radius...){
  -webkit-border-radius: #{$radius};
  -moz-border-radius: #{$radius};
  border-radius: #{$radius};
}
@mixin box-shadow($shadow...){
  -webkit-box-shadow: #{$shadow};
  -moz-box-shadow: #{$shadow};
  box-shadow: #{$shadow};
}
@mixin background-size($size){
  -webkit-background-size: #{$size};
  -moz-background-size: #{$size};
  -o-background-size: #{$size};
  background-size: #{$size};
}
@mixin sprite($position){
//  background: url(../img/icon/sprite.png) no-repeat #{$position};
}
@mixin opacity($opacity: 0.8){
  opacity: #{$opacity};
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity*100})";
  filter: alpha(opacity=#{$opacity*100});
}
@mixin translateX($translate: -10px){
  -ms-transform: translateX(#{$translate});
  -webkit-transform: translateX(#{$translate});
  transform: translateX(#{$translate});
}
@mixin translateY($translate: -10px){
  -ms-transform: translateY(#{$translate});
  -webkit-transform: translateY(#{$translate});
  transform: translateY(#{$translate});
}
.clearfix{
  &:before{
    @extend %pseudo-before;
  }
  &:after{
    @extend %pseudo-after;
  }
}
sup,sub{
  font-size: 10px;
}
.clear{
  clear: both;
  content: "";
}
.wrapper{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
.container{
  @extend .clearfix;
  max-width: 1140px;
  margin: 0 auto;
}
%icon-square-16{
  width: 16px;
  height: 16px;
}
%icon-square-24{
  width: 24px;
  height: 24px;
}
%icon-square-32{
  width: 32px;
  height: 32px;
}
%icon-square-48{
  width: 48px;
  height: 48px;
}
%no-select{
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pc{
  display: block;
}
.sp{
  display: none;
}